<template>
	<view class="bw_index" ref='bwIndex'>
		<BwHome v-show="currentTab===HOME_PAGE" ref='homeComponent'></BwHome>
		<BwMarket v-show="currentTab===MARKET_PAGE" ref='marketComponent'></BwMarket>
		<BwDeal v-show="currentTab===DEAL_PAGE" ref='dealComponent'></BwDeal>
		<BwMe v-show="currentTab===ME_PAGE" ref='meComponent'></BwMe>
		<bw-footer :tab="currentTab" @tabChange="handleTabChange"></bw-footer>
	</view>
</template>

<script>
	import BwHome from "../home/home.vue"
	import BwDeal from "../deal/deal.vue"
	import BwMarket from "../market/market.vue"
	import BwMe from "../me/me.vue"

	const HOME_PAGE = 0
	const MARKET_PAGE = 1
	const DEAL_PAGE = 2
	const ME_PAGE = 3
	export default {
		components: {
			BwHome,
			BwDeal,
			BwMarket,
			BwMe
		},
		data() {
			return {
				currentTab: HOME_PAGE,
				HOME_PAGE,
				MARKET_PAGE,
				DEAL_PAGE,
				ME_PAGE,
				hasReady: false
			}
		},
		onLoad() {
			console.log('页面加载')
		},
		onShow() {
			console.log('页面显示')
			if (this.hasReady) {
				this.componentStatusChange(this.currentTab, 'onComponentReady')
			}
		},
		onReady() {
			console.log('页面Ready')
			this.hasReady = true
			this.componentStatusChange(this.currentTab, 'onComponentReady')
		},
		onHide() {
			console.log('页面隐藏')
			this.componentStatusChange(this.currentTab, 'onComponentHide')
		},
		onUnload() {
			console.log('页面卸载')

		},
		onShareAppMessage() {
			console.log('分享!')

		},
		onReachBottom() {
			console.log('下拉加载...')

		},
		onPageScroll() {
			console.log('页面滚动...')

		},
		onPullDownRefresh() {
			console.log('上拉刷新...')
			uni.stopPullDownRefresh();

		},
		methods: {
			// 组件里面不会有生命周期 只能手动实现
			handleTabChange(tab) {
				this.componentStatusChange(this.currentTab, 'onComponentHide')
				this.currentTab = tab
				this.$nextTick(() => {
					this.componentStatusChange(tab, 'onComponentShow')
				})
			},

			// 模拟组件的生命周期
			componentStatusChange(tab, status) {
				if (tab === this.HOME_PAGE) {
					this.$refs.homeComponent[status]()
				} else if (tab === this.MARKET_PAGE) {
					this.$refs.marketComponent[status]()
				} else if (tab === this.DEAL_PAGE) {
					this.$refs.dealComponent[status]()
				} else if (tab === this.ME_PAGE) {
					this.$refs.meComponent[status]()
				}
			},
		}
	}
</script>

<style>
	uni-page-wrapper {
		background-color: #f8f8fd;
	}

	.bw_index {
		flex-direction: column;
	}

	.index_top_bg {
		flex: 1;
		height: 240px;
		background: #007AFF;
	}
</style>
